import React from 'react';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import dayLocaleData from 'dayjs/plugin/localeData';
import { Badge, Calendar, Col, Radio, Row, Select, Typography, } from 'antd';
import './calendar.scss'
dayjs.extend(dayLocaleData);

const getListData = (value) => {
    let listData;
    switch (value.date()) {
        case 6:
            listData = [
                {
                    type: 'warning',
                    content: '生物',
                },
            ];break
        case 7:
            listData = [
                {
                    type: 'warning',
                    content: '数学',
                },
            ];break
        case 10:
            listData = [
                {
                    type: 'warning',
                    content: '生物',
                },
            ];break
        case 11:
            listData = [
                {
                    type: 'warning',
                    content: '物理',
                },
            ];break
        case 15:
            listData = [
                {
                    type: 'warning',
                    content: '化学',
                },
            ];break
        case 17:
            listData = [
                {
                    type: 'warning',
                    content: '生物',
                },
            ];break
        case 18:
            listData = [
                {
                    type: 'warning',
                    content: '物理',
                },
            ];break
        case 19:
            listData = [
                {
                    type: 'warning',
                    content: '化学',
                },
            ];break
        case 24:
            listData = [
                {
                    type: 'warning',
                    content: '生物',
                },
            ];break;
        default:
    }
    return listData || [];
};


const App = () => {

    // 关于切换到月份显示日的函数
    const dateCellRender = (value) => {
        // console.log(value);
        const listData = getListData(value);
        return (
            <ul className="events">
                {listData.map((item) => (
                    <li key={item.content}>
                        <Badge status={item.type} text={item.content} />
                    </li>
                ))}
            </ul>
        );
    };
    const cellRender = (current, info) => {
        if (info.type === 'date') return dateCellRender(current);
        return info.originNode;
    };

    // 设置头部属性api
    const headerRender = ({ value, type, onChange, onTypeChange }) => {
        const start = 0;
        const end = 12;
        const monthOptions = [];
        let current = value.clone();
        const localeData = value.localeData();
        const months = [];
        for (let i = 0; i < 12; i++) {
            current = current.month(i);
            months.push(localeData.monthsShort(current));
        }
        for (let i = start; i < end; i++) {
            monthOptions.push(
                <Select.Option key={i} value={i} className="month-item">
                    {months[i]}
                </Select.Option>,
            );
        }
        const year = value.year();
        const month = value.month();
        const options = [];
        for (let i = year - 10; i < year + 10; i += 1) {
            options.push(
                <Select.Option key={i} value={i} className="year-item">
                    {i}
                </Select.Option>,
            );
        }
        return (
            <div
                style={{
                    padding: 8,
                }}
            >
                <Typography.Title level={4}>课表</Typography.Title>
                <Row gutter={8}>
                    <Col>
                        <Select
                            size="small"
                            popupMatchSelectWidth={false}
                            value={month}
                            onChange={(newMonth) => {
                                const now = value.clone().month(newMonth);
                                onChange(now);
                            }}
                        >
                            {monthOptions}
                        </Select>
                    </Col>
                </Row>
            </div>
        );
    }

    return (
        <Calendar
            cellRender={cellRender}
            headerRender={headerRender}
            fullscreen={false}
            // key={1}  
        />)
};

export default App;
